<template>
    <div
        :style="fontStyle"
        ref="groupTime"
    >
        剩余 <span v-if="remainDay>0">{{remainDay}}天</span> <span v-show="remainHour<10">0</span>{{remainHour}}:<span v-show="remainMinute<10">0</span>{{remainMinute}}:<span v-show="remainSecond<10">0</span>{{remainSecond}} 结束
    </div>
</template>

<script>
export default {
    name: 'RemainTime',
    props: ['fontStyle', 'stopTime'],
    data() {
        return {
            remainDay: 0,
            remainHour: 0,
            remainMinute: 0,
            remainSecond: 0,
            time: null
        }
    },
    mounted() {
        this.getTime()
        this.time = setInterval(this.getTime, 1000)
    },
    methods: {
        getTime() {
            let today = new Date(), //当前时间
                h = today.getHours(),
                m = today.getMinutes(),
                s = today.getSeconds()
            let stopTime = new Date(this.stopTime.replace(/-/g, '/')), //结束时间
                stopH = stopTime.getHours(),
                stopM = stopTime.getMinutes(),
                stopS = stopTime.getSeconds()
            let remainTime = stopTime.getTime() - today.getTime()
            if (remainTime < 0) {
                this.$refs.groupTime.innerHTML = '已结束'
                clearInterval(this.time)
                return
            }
            this.remainDay = parseInt(remainTime / (60 * 60 * 24 * 1000)) //转换为天
            let remainTimeD =
                parseInt(remainTime) -
                parseInt(this.remainDay * 60 * 60 * 24 * 1000) //除去天的毫秒数
            this.remainHour = parseInt(remainTimeD / (60 * 60 * 1000)) //除去天的毫秒数转换成小时
            let remainTimeH = remainTimeD - this.remainHour * 60 * 60 * 1000 //除去天、小时的毫秒数
            this.remainMinute = parseInt(remainTimeH / (60 * 1000)) //除去天的毫秒数转换成分钟
            let remainTimeM = remainTimeH - this.remainMinute * 60 * 1000 //除去天、小时、分的毫秒数
            this.remainSecond = parseInt(
                (remainTime -
                    this.remainDay * 60 * 60 * 24 * 1000 -
                    this.remainHour * 60 * 60 * 1000 -
                    this.remainMinute * 60 * 1000) /
                    1000
            ) //除去天、小时、分的毫秒数转化为秒
        }
    }
}
</script>

<style lang="stylus" scoped></style>

